<template>
  <view-box ref="viewBox" body-padding-bottom="55px" class="container">
    <search
      v-model="name"
      @on-submit="search"
      @on-cancel="cancel"
      :auto-fixed="false"
      auto-scroll-to-top
      ref="search">
    </search>
    <grid class="grid">
      <grid-item label="文化" @click.native="category(1)">
        <i slot="icon" class="iconfont icon-cultural"></i>
      </grid-item>
      <grid-item label="开运" @click.native="category(4)">
        <i slot="icon" class="iconfont icon-taiji1"></i>
      </grid-item>
      <grid-item label="养生" @click.native="category(5)">
        <i slot="icon" class="iconfont icon-jiankang"></i>
      </grid-item>
      <grid-item label="食品" @click.native="category(6)">
        <i slot="icon" class="iconfont icon-lvseshipin"></i>
      </grid-item>
      <grid-item label="积分商城" @click.native="$router.push('/jifen_shop?category_id=15')">
        <i slot="icon" class="iconfont icon-jifenshangcheng-"></i>
      </grid-item>
    </grid>
    <!-- <sticky>
      <flexbox class="flex-order" :gutter="0" justify="center">
        <flexbox-item @click.native="order('sales_count')">
          综合 <i class="iconfont icon-shangxia"></i>
        </flexbox-item>
        <flexbox-item  @click.native="order('price')">
          价格 <i class="iconfont icon-shangxia"></i>
        </flexbox-item>
        <flexbox-item  @click.native="order('id')">
          上新 <i class="iconfont icon-shangxia"></i>
        </flexbox-item>
        <flexbox-item  @click.native="$refs.search.setFocus()">
         搜索 <i class="iconfont icon-shaixuan1"></i>
        </flexbox-item>
      </flexbox>
    </sticky> -->

    <list :list="list"></list>
    <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
      <load-more slot="no-more" :show-loading="false" tip="到底了" background-color="#fbf9fe"></load-more>
      <empty slot="no-results" tips="暂时没有相关商品"></empty>
    </infinite-loading>
    <footer-bar slot="bottom" selected="products"></footer-bar>
  </view-box>
</template>
<script>
import { Flexbox, FlexboxItem, XImg, ViewBox, Search, Sticky, Grid, GridItem } from 'vux'
import List from './components/List'
import FooterBar from '../components/FooterBar'
export default {
  data () {
    return {
      list: [],
      name: null,
      params: {
        order_by: 'order',
        order_type: 'asc',
        page_size: 20,
        category_id: 0,
        name: null,
        page: 1
      }
    }
  },
  watch: {
    params: {
      deep: true,
      handler (newValue) {
        this.list = []
        this.$nextTick(() => {
          this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
        })
      }
    }
  },
  components: {
    Flexbox,
    FlexboxItem,
    XImg,
    List,
    ViewBox,
    FooterBar,
    Search,
    Sticky,
    Grid,
    GridItem
  },
  mounted () {
    this.params.category_id = this.$route.query.category_id ? this.$route.query.category_id : 0
  },
  methods: {
    order (by) {
      this.params.order_by = by
      this.params.order_type = this.params.order_type === 'asc' ? 'desc' : 'asc'
    },
    category (id) {
      this.params.category_id = id
    },
    search () {
      this.params.name = this.name
    },
    cancel () {
      this.params.name = null
    },
    infiniteHandler ($state) {
      this.$http.get('/goods?is_on_sale=1', {
        params: {
          page: this.list.length / 20 + 1,
          page_size: 20,
          name: this.params.name,
          order_by: this.params.order,
          category_id: this.params.category_id,
          order_type: this.params.order_type
        }
      }).then((response) => {
        if (response.data.data.length) {
          this.list = this.list.concat(response.data.data)
          $state.loaded()
          if (!response.data.next_page_url) {
            $state.complete()
          }
        } else {
          $state.complete()
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
  .container {
    background: #EEEEEE;
  }
  .flex-order {
    background: #fff;
    padding: 5px 0;
    text-align: center;
    color: #7E7E7E
  }
  .grid {
    background: #fff;
    margin-bottom: 10px;
    margin-top: 5px;
  }
  .grid .weui-grid {
    color: @tabbar-text-active-color;
    padding: 10px 0;
  }
  .grid .weui-grid:after {
     border: none;
  }
  .grid .weui-grid:before {
    border: none;
  }
  .grid i{
    font-size: 25px;
    line-height: 25px;
  }
</style>